<template>
  <div class="login">
      <div class="login-con">
        <!-- 表单部分 -->
        <el-form
            ref="ruleFormRef"
            :model="ruleForm"
            status-icon
            :rules="rules"
            class="demo-ruleForm"
        >
        <!-- 修改为用户名 -->
            <el-form-item prop="username" class="item-from">
            <label for="username">用户名</label>
            <el-input v-model.trim="ruleForm.username" type="text" autocomplete="off" />
            </el-form-item>
            <el-form-item  prop="password" class="item-from">
            <label for="password">密码</label>
            <el-input
                id="password"
                v-model.trim="ruleForm.password"
                type="password"
                autocomplete="off"
                minlength="6"
                maxlength="20"
            />
            </el-form-item>
            <!-- 身份类型 -->
            <el-form-item  
                prop="categary" 
                class="item-from"
            >
             <!-- <label>类型</label>
           <el-input 
                type="text"
                v-model="ruleForm.categary"
                autocomplete="off"
                minlength="6"
                maxlength="20"
            /> -->
            <!-- <el-select v-model="value" placeholder="请选择">
                <el-option
                v-for="item in options"
                v-model="ruleForm.categary"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                minlength="6"
                maxlength="20"
                >
                </el-option>
            </el-select> -->
            </el-form-item>
            <!-- 设置按钮 -->
            <el-form-item>
                <el-button 
                    type="danger"  
                    class="login-btn block"  
                    @click="submitForm(ruleFormRef)"
                    :disabled="btnbool"
                >登录</el-button>
            </el-form-item>
        </el-form>

      </div>
  </div>
</template>

<script setup lang="ts">
import { reactive,ref, watch } from 'vue';
import {loginType} from '../../types/index'
// elementui
import type { FormInstance } from 'element-plus';
// 引入表单验证
import * as verification from '../../util/verification';
import link  from '../../util/api';
// 使用饿了吗弹框提示
import { ElMessage } from 'element-plus'
// 使用md5加密
import useMd5 from '../../../hooks/useMd5'
import { useRouter } from 'vue-router';

// 创建路由
    const router = useRouter()

    // let options = ref<any>( [{
    //       value: '选项1',
    //       label: 'player'
    //     }, {
    //       value: '选项2',
    //       label: 'shangjia'
    //     }, {
    //       value: '选项3',
    //       label: 'coser'
    //     }
    // ])
        let value = ref<any>('')

    // 创建一个变量控制是否能点击登录按钮
    let btnbool = ref<boolean>(true)


    // 表单验证相关
    const ruleFormRef = ref<FormInstance>()
    // 用户名
    const checkUser = (rule: any, value: any, callback: any) => {
        if (!value) {
            return callback(new Error('用户名不能为空！'))
        }else{
            callback()
        }   
    }

    //密码 
    const validatePass = (rule: any, value: any, callback: any) => {
        // let reg =  /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/   // 验证密码 6至15位的字母+数字
        if (value === '') {
            callback(new Error('密码不能为空!!'))
        } else{
            callback()
        }
    }

    const ruleForm = reactive({
        username: '',
        password: '',
        // categary: '',
    })

    // 设置何种方式触发，表单验证默认是失去焦点 当触发后会调用前面的函数从而进行表单验证
    const rules = reactive({
        password: [{ validator: validatePass, trigger: 'blur' }],
        // passwords: [{ validator: validatePass, trigger: 'blur' }],
        username: [{ validator: checkUser, trigger: 'blur' }],
    })
    let resultReq = ref<any>({
        uname:ruleForm.username,
        password:ruleForm.password
    })

    const submitForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.validate((valid) => {
            if (valid) {
                    console.log("登录")
                    link(`/adminLogin?uname=${ruleForm.username}&password=${useMd5(ruleForm.password).value}`,"GET").then((res:any)=>{ 
                        // ${useMd5(ruleForm.password).value}
                        //&categary=${ruleForm.categary}
                        // 解析出数据
                        let {data} :any = res
                        let statusCode = data.status.code
                        // console.log(data.token)
                        // console.log(statusCode)
                        if(data.length != 0){
                            if(statusCode === 200){
                                ElMessage("登录成功！")
                            console.log(data.status.code)
                            // ${useMd5(ruleForm.password).value}
                            localStorage.setItem('username',ruleForm.username )
                            localStorage.setItem('token',data.token)
                            // 登录成功后跳转首页
                            router.push("/home")
                            }else{
                                ElMessage.error("登录失败！")
                            }
                            
                        }
                    })
            } else {
                localStorage.clear()
                console.log('error submit!')
                return false
            }
        })
    }

    const resetForm = (formEl: FormInstance | undefined) => {
        if (!formEl) return
        formEl.resetFields()
    }

    // 校验空数据时不能点击
    watch(ruleForm,(newVal)=>{
        if(newVal.username!="" && newVal.password !=""){
            btnbool.value = false
        }else{
            btnbool.value = true
        }
    })
</script>

<style  lang="scss">
#app,body,html{
    width: 100% !important; 
    height:100% !important;
}
.login {
    background-color:rgb(176, 236, 216);
    height: 100%;
    width:100%;
    background: url('../../assets/images/login.jpg') no-repeat 40% top;
    .login-con {
        .el-form-item{
            margin-top: 10px;
        }
    }
    .demo-ruleForm{
        width: 30%;
        margin: 0 auto;
        .label{
            display: block;
            margin-bottom: 3px;
            font-size:14px;
            color: #fff;
        }
        .item-from{
            margin-bottom: 13px;
        }
        
        .block{
            display: block;
            width: 100%;
        }
        // 按钮
        .login-btn{
            margin-top: 19px;
        }

        // .el-select{
        //     width: 326px;
        //     height: 30px;
        // }

    }
  }
//   .login,html,body{//设置页面100%高
//        height: 100%;
//   }
</style>